<template>
    <div id="app" v-infinite-scroll="getData">
        <div class="title">上传一览表</div>
        <el-row class="tableBtnTop">
            <el-select 
                v-model="searchType"
                placeholder="请选择" class="filter"
            >
                <el-option
                    v-for="(typeItem,typeIndex) of searchTypeList"
                    :key="typeItem.value"
                    :value="typeItem.value"
                    :label="typeItem.name"
                ></el-option>
            </el-select>
            <div class="search">
                <el-input placeholder="请输入内容"
                    v-model="searchText"
                    @keyup.enter.native="handleSearch"
                >
                    <i slot="prefix" class="el-input__icon el-icon-search"
                    ></i>
                </el-input>
            </div>
        <!-- <div class="search" style="width:400px;margin-left:0;">
            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%;"></el-date-picker>
        </div> -->
        </el-row>
        <div class="preDiv">
            <ul class="ul clearfix">
                <li v-for="(item,index) in list" :key="index">
                    <div class="titleDiv">
                        <!-- <div class="ell">分类：短视频 - 评论测试超长标题的哈</div> -->
                        <div class="ell">
                            {{
                                item.title
                            }}
                        </div>
                    </div>
                    <div class="image src">
                        <div class="imageSlot" v-if="!item.url">暂无图片</div>
                        <el-image :src="item.url" lazy class="src" fit="contain" v-else 
                            @click="lookImage(index)">
                        </el-image>
                        <!-- 
                            对接的请注意：
                            这里src应该引用本次用户接单做任务的第一张收集图，若没有，则是''
                            这里preview-src-list应该引用本次任务所有图片，已方便在唤起图片预览的时候左右键盘可以查看其它图片。 
                        -->
                    </div>
                    <div class="text disbox"
                        v-if="item.user_id"
                    >
                        <img :src="item.user_id.avatar" class="head" />
                        <div class="info disflex">
                            <h3 class="ell">{{item.user_id.user_name}}</h3>
                            <span class="ell">{{item.time}}</span>
                        </div>
                        <a class="lookDetail"
                            @click="$router.push(`/user/detail/${item.user_id.user_id}`)"
                        >查看</a>
                    </div>
                    <!-- <div class="select" :class="item.select?'active':''" v-if="item.status==0" @click.stop="select(index)"></div> -->
                </li>
            </ul>
            <div class="footerText" v-if="hasMore">
                正在加载中...
            </div>
            <div v-if="!hasMore" class="footerText">
                暂无更多数据
            </div>
        </div>
        <div class="startBtn" @click="showHandle = true;" v-if="showBtn">批量<br />审核</div>

        <!-- 图片预览大法 -->
        <div v-show="false">
            <viewer @inited="inited" :options="{title:false,transition:false,}" :images="images">
                <img :src="item" v-for="(item,index) in images" :key="index" />
            </viewer>
        </div>

        <el-dialog title="提示" :visible.sync="showHandle" width="500px">
        <el-form label-position="top">
            <el-form-item label="">
                <el-radio-group value="1" style="margin-bottom:25px;">
                    <el-radio label="1">通过</el-radio>
                    <el-radio label="2">不通过</el-radio>
                </el-radio-group>
                <el-input></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="showHandle = false">取 消</el-button>
            <el-button type="primary" @click="showHandle = false; successShow = true;">确 定</el-button>
        </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="successShow" width="500px">
            <div class="successContent">
                处理成功2个，失败<font color="#F30">2</font>个，具体原因如下：<br />
                接单ID：<a class="blue" href="/task/acceptDetail" target="_blank">29101</a>，由于状态是已完成，所以无法审核<br />
                接单ID：<a class="blue" href="/task/acceptDetail" target="_blank">192221</a>，由于状态是已完成，所以无法审核<br />
                接单ID：<a class="blue" href="/task/acceptDetail" target="_blank">39131</a>，由于状态是已完成，所以无法审核<br />
                接单ID：<a class="blue" href="/task/acceptDetail" target="_blank">29651</a>，由于状态是已完成，所以无法审核<br />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="successShow = false">我知道了</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import UserUpload from './index.js';
    export default UserUpload;
</script>
<style lang="scss" scoped>
.successContent{
	margin-top:-10px;
	margin-bottom:-10px;
	line-height:32px;
	font-size:15px;
}
.title {
  margin-bottom: 25px;
  font-size: 21px;
  margin-top: 65px;
}
.preDiv{
	.ul{
		li{
			float:left;
			width:calc((100% - 30px * 5) / 6);
			margin-right:30px;
			margin-bottom:30px;
			position:relative;
			overflow:hidden;
			&:nth-child(6n){
				margin-right:0;
			}
			.image{
				height:490px;
				cursor: pointer;
				.src{
					display:block;
					height:100%;
				}
			}
			&:hover{
				.titleDiv{
					height:70px;
					padding-top:10px;
				}
			}
			.titleDiv{
				position:absolute;
				top:0;
				left:0;
				width:100%;
				background:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0));;
				height:0;
				z-index:1;
				color:#FFF;
				font-size:13px;
				padding:0 6%;
				line-height:21px;
				overflow:hidden;
				transition: 0.3s all;
			}
			.text{
				background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8));;
				position:absolute;
				bottom:0;
				left:0;
				width:100%;
				height:80px;
				padding:0 6%;
				padding-top:27px;
				.head{
					border-radius:50%;
					width:40px;
					height:40px;
				}
				.info{
					color:#FFF;
					padding-left:15px;
					padding-right:5px;
					h3{
						font-weight:normal;
						font-size:15px;
					}
					span{
						font-size:12px;
						display: block;
						margin-top:4px;
					}
				}
				.lookDetail{
					color: #FFF;
					font-size: 12px;
					text-decoration: none;
					border: 1px solid #FFF;
					padding: 0 13px;
					border-radius: 30px;
					margin-top: 10px;
					display: block;
					height: 25px;
					line-height: 23px;
                    cursor: pointer;
				}
			}
		}
	}
}
.imageSlot{
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    color: #909399;
	font-size: 15px;
	line-height:430px;
	text-align:center;
}
.footerText{
	text-align:center;
	font-size:15px;
	color:#595959;
	width:100%;
}
.select{
	position:absolute;
	right:0px;
	top:0px;
	z-index:2;
	width:30px;
	height:30px;
	background:url("../../../../static/img/select.png")no-repeat center center;
	background-size:100% 100%;
	&.active{
		background:url("../../../../static/img/select_hover.png")no-repeat center center;
		background-size:100% 100%;
	}
}
.startBtn{
    width: 75px;
    height: 75px;
    border-radius: 50%;
    text-align: center;
    color: #FFF;
    line-height: 20px;
    padding-top: 18px;
    position: fixed;
    right: 60px;
    bottom: 60px;
    font-size: 15px;
    cursor:pointer;
    box-shadow: 0px 0px 10px #9fde57;
    transition: 0.2s all;
	z-index:1001;
	background: linear-gradient(to right, #8BC34A, #9fde57);
    &:hover{
        opacity: 0.9;
    }
}
</style>